<template>
	<!-- @第一种是调节视频进度的样式[带有视频当前时长和总时长] -->
	<!-- @第二种是调节音量和亮度的样式，只有一个进度条 -->
	<view :class="SliderType==1?'one':'two'"class="changingSlider-view">
		<!-- 当前进度/总进度 -->
		<view v-if="SliderType==1" class="Top-view-Time">
			<view class="Top-view-Time__jindu-box">
				<text class="app-text Top-view-Time__jindu-box__jindu-tiem app-ttf-b"
				:style="[{'color':currTimeTextColor}]"
				>{{currtime}}</text>
				<text class="app-text Top-view-Time__jindu-box__jiange-text">/</text>
				<text class="app-text Top-view-Time__jindu-box__zongjindu-time app-ttf-b"
				>{{druationTime}}</text>
			</view>
		</view>
		<!-- 纯手工进度条,只是预览，无作用 -->
		<!-- 总长度是200rpx,进度条总值是100 -->
		<view class="Bottom-view-slider"
		:style="[{'background-color':SliderBoxColor}]">
			<!-- 进度条控制滑块 -->
			<view class="Bottom-view-slider__change-slider"
			:style="[{'width':Number(SliderValue*2)+'rpx'},
			{'background-color':activeBackgroundColor},
			{'background-image':activeBackgroundImage}]"
			></view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"FatFatMeng-slider",
		props:{
			// 当前视频时间(当前进度)
			currtime:{
				type:String,
				default:''
			},
			// 总时长(总进度)
			druationTime:{
				type:String,
				default:''
			},
			// 进度条的值
			SliderValue:{
				type:Number,
				default:0
			},
			/* 
			   @进度条模板类型
			   @1 = 进度条+视频当前时长和总时长显示
			   @2 = 单独的进度条，无其他 
			*/
			SliderType:{
				type:Number,
				default:1,//默认是第一种
			},
			// 线性渐变背景色（左边已选择部分）
			activeBackgroundImage:{
				type:String,
				default:''//爱奇艺'linear-gradient(to right,#00cefe,#00e208)'
			},
			// 背景色（左边已选择部分）
			activeBackgroundColor:{
				type:String,
				default:'#00d0d3'
			},
			// 当前进度(当前视频时间)字体颜色
			currTimeTextColor:{
				type:String,
				default:'#00d0d3'
			},
			// 盒子背景颜色（右边未选择部分）
			SliderBoxColor:{
				type:String,
				default:'rgba(255, 255, 255, 0.65)'
			},
		},
		data() {
			return {
				
			};
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>	
	//@第一种是调节视频进度的样式[带有视频当前时长和总时长]
	.one{
		//flex: 1;
		//background-color: rgba(0,0,0,0.3);
		//padding: 20rpx;
		border-radius: 10rpx;
		.Bottom-view-slider{
			margin-top: 20rpx;
			background-color: rgba(255, 255, 255, 0.65);
		}
	}
	//@第二种是调节音量和亮度的样式，只有一个进度条
	.two{
		//background-color: rgba(0,0,0,0.3);
		.Bottom-view-slider{
			background-color: rgba(255, 255, 255, 0.65);
		}
	}
	// 进度条面板独有的样式(2.0优化版)
	
	.changingSlider-view{
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center!important;
		justify-content: center!important;
	}
	
	.Top-view-Time{
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		
		// 视频进度调节盒子
		&__jindu-box{
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
			
			&__jindu-tiem{
				color: #00d0d3;//颜色可自定义，在播放器进度条属性上
				font-size: 60rpx;//60rpx
				// 左边当前时长
			}
			
			&__jiange-text{
				// 中间间隔符 / 
				@extend .Top-view-Time__jindu-box__zongjindu-time;
			}
			
			&__zongjindu-time{
				// 右边总时长
				color: #FFFFFF;
				font-size: 48rpx;//48rpx
			}
		}
	}
	
	.Bottom-view-slider{
		/* #ifndef APP-PLUS-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		width: 200rpx;
		height: 6rpx;
		//background-color: #4CD964;
		
		// 亮度调节、音量调节 >> 进度条
		&__change-slider{
			height: 6rpx;
			width: 10rpx;
			background-color: #00d0d3;//颜色可自定义，在播放器进度条属性上
			
		}
	}
	
</style>
